<template>
  <div>
    <button @click="fun">跳转ONE</button>
    <!-- this.$router 路由操作对象 里面存放的都是操作路由的方法
      this.$route 路由信息对象 里面存放的都是路由的相关信息 -->
      <table cellpadding="20" cellspacing="0" border="1">
        <tbody>
           <tr v-for="(item) in list" :key="item.id">
             <td>{{item.name}}</td>
             <td @click="handleFun(item.id)">查看详情</td>
           </tr>
        </tbody>
      </table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: "001",
          name: "路飞",
        },
        {
          id: "002",
          name: "索隆",
        },
        {
          id: "003",
          name: "山治",
        },
        {
          id: "004",
          name: "乔巴",
        },
      ],
    };
  },
  beforeRouteEnter(to,from,next){
    console.log("路由进入了",to,from);
    next()
  },
  beforeRouteUpdate(to,from){
    console.log("路由路径更新了",to,from);
  },
  beforeRouteLeave(to,from,next){
    console.log("路由离开了",to,from);
     next()
  },
  methods: {
    handleFun(id){
      console.log(id);
      // 路由传参
      // query 可以name 跳转 也可以用path 跳转  会显示在地址栏上 刷新页面不会丢失参数
      // params 只能name 跳转 不会显示在地址栏上 刷新页面会导致参数丢失

      // this.$router.push({
      //   path:"/one",
      //   query:{
      //     myid:id
      //   }
      // })
      // this.$router.push({
      //   name:"one",
      //   params:{
      //     myid:id
      //   }
      // })
      this.$router.push('/one/123')

    },
    fun() {
      // this.$router.push('/one')
      // this.$router.replace('/one')  //不会产生历史记录
      // this.$router.push({
      //   path:'/one'
      // })
      // 根据路由路径跳转
      this.$router.push({
        name: "one",
      });
      // 根据路由名字跳转
    },
  },
};
</script>

<style>
</style>
